<template>
  <div class="f-table">
    <div class="f-table-header">
      <!--      <slot name="header"></slot>-->
    </div>
    <div class="f-table-body">
      <el-table
        ref="tableRef"
        v-loading="props?.loading"
        :="$attrs"
        :data="data"
        empty-text="-"
      >
        <el-table-column
          v-if="props?.isSelection"
          type="selection"
          width="55"
        />
        <el-table-column v-if="props?.hasIndex" type="index" width="50" />
        <template v-for="item in props.columns" :key="item.label">
          <el-table-column
            v-if="item?.hidden != true"
            :fixed="item?.fixed"
            :prop="item?.prop"
            :label="item?.label"
            :sortable="item?.sortable"
            :width="item?.width || 'auto'"
          >
            <template #default="{ row }">
              <div
                v-if="item.render"
                style="
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  width: 100%;
                "
              >
                <component
                  :is="item.render"
                  :data="convertProxyToNormal(row)"
                ></component>
              </div>
              <span
                v-else
                style="white-space: nowrap"
                :title="row[item.prop] || item.emptyStr || '--'"
              >
                {{ row[item.prop] || item.emptyStr || '--' }}
              </span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div v-if="pages" class="f-table-footer" :style="footerStyle">
      <el-pagination
        :current-page="pages?.pageNum"
        :page-size="pages?.pageSize"
        background
        layout="total, prev, pager, next, sizes"
        :total="parseInt('' + pages?.total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { FTableProps } from '@fate/components/fate-table/ftable.types.ts';
import { useAttrs, ref, computed } from 'vue';
import {
  convertArrayValuesToStrings,
  convertProxyToNormal
} from '@fate/utils/covertValue.ts';
import { ElTable } from 'element-plus';

const tableRef = ref<InstanceType<typeof ElTable>>();
const $attrs = useAttrs();

const props = withDefaults(defineProps<FTableProps>(), {
  loading: false,
  isSelection: false,
  hasIndex: false
});

const data = computed(() => {
  const filterArr =
    props.columns
      .filter((i) => {
        return i.isNotMergeArray;
      })
      .map((i) => {
        return i.prop;
      }) || [];
  // console.log(filterArr);
  return convertArrayValuesToStrings(props.tableData, filterArr);
});

const emits = defineEmits(['handleSizeChange', 'handleCurrentChange']);

const handleSizeChange = (val: number) => {
  emits('handleSizeChange', val);
};

const handleCurrentChange = (val: number) => {
  emits('handleCurrentChange', val);
};

const getSelectionRows = () => {
  return tableRef.value?.getSelectionRows();
};

defineExpose({
  getSelectionRows
});
</script>

<style scoped lang="scss">
.f-table {
  width: 100%;
}
</style>
